<template>
  <view class="uni-keyboard">
    <view class="uni-keyboard-number">
      <view class="uni-keyboard-number-item" @tap="keyInput('one')">1</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('two')">2</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('three')">3</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('four')">4</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('five')">5</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('six')">6</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('seven')">7</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('eight')">8</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('nine')">9</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('zero')">0</view>
      <view class="uni-keyboard-number-item" @tap="keyInput('point')"> • </view>
      <view class="uni-keyboard-number-item" @tap="keyInput('delete')">
        <image class="uni-keyboard-number-delete" :src="delIcon" :mode="'scaleToFill'" />
      </view>
    </view>

    <view class="uni-keyboard-operate">
      <view class="uni-keyboard-clear-btn" @tap="keyClear">
        <view class="uni-keyboard-clear-text">
          {{ '清除' }}
        </view>
      </view>
      <view class="uni-keyboard-sure-btn" @tap="keySure">
        <view class="uni-keyboard-sure-text">
          {{ tips }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let _this;
export default {
  name: 'keyboard',
  props: {
    value: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: '确认'
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      delIcon: '/static/images/keyboard/delete.png',
      visible: this.show,
      number: this.value
    };
  },
  watch: {
    show: {
      handler(show) {
        _this.visible = show;
      }
    }
  },
  created(){
    _this = this;
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  methods: {
    keyInput(val){
      if(!_this.number){
        _this.number = '';
      }

      if(val){
        if('point' !== val && 'delete' !== val && _this.number.indexOf('.') > -1){
          let numArray = _this.number.split('.');
          if(numArray[1].length > 1){
            uni.showToast({
              title: '支付金额最小单位到分',
              icon: 'none'
            });
            return;
          }
        }

        switch (val){
          case 'one':
            _this.number += '1';
            break;
          case 'two':
            _this.number += '2';
            break;
          case 'three':
            _this.number += '3';
            break;
          case 'four':
            _this.number += '4';
            break;
          case 'five':
            _this.number += '5';
            break;
          case 'six':
            _this.number += '6';
            break;
          case 'seven':
            _this.number += '7';
            break;
          case 'eight':
            _this.number += '8';
            break;
          case 'nine':
            _this.number += '9';
            break;
          case 'zero':
            _this.number += '0';
            break;
          case 'point':
            if(_this.number.indexOf('.') < 0){
              _this.number += '.';
            }
            break;
          case 'delete':
            let length = _this.number && _this.number.length ? _this.number.length : 1;
            let index = length - 1;
            _this.number = _this.number.substr(0 , index);
            break;
        }
      }

      _this.$emit('keyInput', _this.number);
    },
    keyClear(){
      _this.number = '';
      _this.$emit('keyClear');
    },
    keySure(){
      _this.$emit('keySure');
    }
  }
}
</script>

<style scoped lang="scss">
  .uni-keyboard{
    width: 100%;
    height: auto;
    display: inline-block;
    float: left;

    .uni-keyboard-number{
      width: 78%;
      height: auto;
      display: inline-block;
      float: left;

      .uni-keyboard-number-item{
        width: 33.3%;
        text-align: center;
        height: 120rpx;
        line-height: 120rpx;
        display: inline-block;
        float: left;
        background-color: #fff;
        border: 1rpx solid #ddd;
        font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
        font-size: 36rpx;
        color: #333;

        .uni-keyboard-number-delete{
          width: 60rpx;
          height: 60rpx;
          display: inline-block;
          margin-top: 20rpx;
        }

        .font-bold{
          font-weight: bold;
        }
      }

      .uni-keyboard-number-item:active{
        background-color: #eee !important;
      }
    }

    .uni-keyboard-operate{
      width: 22%;
      text-align: center;
      height: auto;
      display: inline-block;
      float: left;

      .uni-keyboard-clear-btn{
        width: 100%;
        text-align: center;
        height: 120rpx;
        line-height: 120rpx;
        display: inline-block;
        float: left;
        background-color: #fff;
        border: 1rpx solid #ddd;

        .uni-keyboard-clear-text{
          width: 100%;
          height: auto;
          font-family: 'NSimSun',sans-serif;
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .uni-keyboard-clear-btn:active{
        background-color: #eee !important;
      }

      .uni-keyboard-sure-btn{
        width: 100%;
        text-align: center;
        height: 360rpx;
        display: inline-block;
        float: left;
        background-image: linear-gradient(to right, #f5995e, #fa741b);

        .uni-keyboard-sure-text{
          width: 40rpx;
          height: auto;
          font-family: 'NSimSun',sans-serif;
          font-size: 40rpx;
          font-weight: bold;
          color: #fff;
          padding-top: 15%;
          padding-left: 40%;
        }
      }

      .uni-keyboard-sure-btn:active{
        background-image: linear-gradient(to right, #f5995e, #d7cd06) !important;
      }
    }
  }
</style>
